<template>
  <el-table :data="get_userList" border style="width: 100%">
    <el-table-column prop="uid" label="用户编号" width="180"> </el-table-column>
    <el-table-column prop="username" label="用户名称" width="180">
    </el-table-column>
    <el-table-column prop="rolename" label="所属角色"> </el-table-column>
    <el-table-column prop="status" label="状态">
      <template v-slot="item">
        <el-button type="primary" plain size="small" v-if="item.row.status == 1"
          >启用</el-button
        >
        <el-button type="danger" plain size="small" v-else>禁用</el-button>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template v-slot="item">
        <el-button type="primary" size="small" @click="edit(item.row.uid)"
          >编辑</el-button
        >
        <el-button type="danger" size="small" @click="delItem(item.row.uid)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <el-pagination background layout="prev, pager, next" :total="get_count" :page-size="pageSize" @current-change="changePage" />
</template>

<script setup>
import { onMounted,computed,defineEmits } from 'vue'
import { useStore } from 'vuex'
import {userdelete} from '@/request/api'
const emit = defineEmits(['edit'])
const $store = useStore()
const action_userList = ()=>{
    $store.dispatch('user/action_userList')
}
onMounted(()=>{
    action_userList()
    action_userconut()
})
const get_userList = computed(()=>{
    return $store.getters['user/get_userList']
})
const action_userconut = ()=>{
    $store.dispatch('user/action_userconut')
}
const get_count = computed(()=>{
    return $store.getters['user/get_count']
})
const pageSize = computed(()=>{
    return $store.getters['user/get_size']
})
const mutation_page = (e)=>{
    $store.commit('user/mutation_page',e)
}
const changePage =(e)=>{
    mutation_page(e)
    action_userList()
}
// 删除
const delItem =(uid)=>{
    ElMessageBox.confirm(
    '此操作将永久删除该菜单，是否继续？',
    '温馨提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      try{
        let res = await userdelete({uid})
        if(res.code == 200){
          ElMessage({
            type: 'success',
            message: res.msg,
          })
          action_userList()
          action_userconut()
        }else{
          ElMessage({
            type: 'warning',
            message: res.msg,
          })
        }
      }catch(err){
        ElMessage({
            type: 'error',
            message: err,
        })
      }
      
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}
const edit = (uid)=>{
    emit('edit',uid)
}
</script>

<style scoped>
.el-pagination{
    display:flex;
    justify-content: flex-end;
    margin:10px 0;
}
</style>